<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="发票详情">
	</u-navbar>
	<view class="padding-30rpx white-bg">
		<view class="flex-jc-s-b" style="padding-bottom: 10px;font-size: 14px;border-bottom: 1px solid rgba(0,0,0,0.1);">
      <view>
        <text style="font-weight: bold;" :user-select="true">订单编号：{{data.info.orderNum || ''}}</text>
        <text v-if="data.info.orderNum" class="copy-text" @click="copyHandle(data.info.orderNum)">复制</text>
      </view>
			<text style="font-weight: bold;">{{typeMap[data.info.statusCode]}}</text>
		</view>
		<view class="item-content">
			<text class="label-text">发票类型</text>
			<text class="value-text">{{typeMap[data.info.typeCode]}}</text>
		</view>
		<view class="item-content">
			<text class="label-text">抬头类型</text>
			<text class="value-text">{{typeMap[data.info.titleTypeCode]}}</text>
		</view>
		<view class="item-content">
			<text class="label-text">抬头名称</text>
			<text class="value-text">{{data.info.title}}</text>
		</view>
		<view class="item-content">
			<text class="label-text">申请时间</text>
			<text class="value-text">{{data.info.createTime}}</text>
		</view>
		<view v-if="data.info.statusCode !== 'non'" class="item-content">
			<text class="label-text">开票时间</text>
			<text class="value-text">{{data.info.invoicingDate || ''}}</text>
		</view>
		<view class="item-content">
			<text class="label-text">开票金额</text>
			<text class="value-text">￥{{data.info.price}}</text>
		</view>
		<view v-if="data.info.statusCode === 'invalid' || data.info.statusCode === 'reapplied'" class="item-content">
			<text class="label-text">作废时间</text>
			<text class="value-text">{{data.info.invalidTime}}</text>
		</view>
		<view v-if="data.info.statusCode === 'effective'" class="item-content">
			<text class="label-text">电子发票</text>
			<view class="flex-column" style="width: auto;align-items: center;" @click="previewHandle">
				<image style="width: 131px;height: 69px;" :src="data.info.invoiceUrl" mode=""></image>
				<text style="color:#999999;font-size: 12px;margin-top: 5px;">点击预览发票</text>
			</view>
			<!-- 预览 -->
			<u-overlay @click="data.show=false" :show="data.show" mode="center">
				<view class="flex-column" style="width: 100%;height: 100vh;">
					<image style="" :src="data.info.invoiceUrl" mode="" :show-menu-by-longpress="true"></image>
          <view style="margin-top: 15px">
            <u-button @click="saveImage(data.info.invoiceUrl)" shape='circle' :customStyle="{width: '132px',height: '40px',}" type="primary" text="保存">
            </u-button>
          </view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script setup>
	import { reactive } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import {invoiceDetailApi} from './const'
  import { saveImage, copyHandle } from "@/utils/common.js"
	const data = reactive({
		show: false,
    info: {},
	})
  const typeMap = reactive({
    ordinaryElectronic: '电子普通发票',
    enterprise: '企业',
    person: '个人',
    effective: '已开票',
    invalid: '已作废',
    non: '申请中',
    reapplied: '已作废'
  })

  onLoad((options) => {
    invoiceDetailApi(options.id).then((res) => {
      data.info = res.data
    })
  })

	const previewHandle = () => {
		data.show = true
	}
  // const saveImage = () => {
  //   uni.downloadFile({
  //     url: data.info.invoiceUrl,
  //     success(res) {
  //       uni.saveImageToPhotosAlbum({
  //         filePath: res.tempFilePath,
  //         success: function() {
  //           uni.showToast({ title: '保存到相册成功', icon: 'none', duration: 1200 });
  //         },
  //         fail: function(err) {
  //           uni.showToast({ title: '保存到相册失败，请重试', icon: 'none', duration: 1200 });
  //         }
  //       });
  //     },
  //     fail: (err) => { uni.showToast({ title: '保存到相册失败，请重试', icon: 'none', duration: 1200 }); }
  //   });
  // }
	const close = () => {
		data.show = false
	}
</script>

<style lang="scss" scoped>
  .item-content {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
  }
	.label-text {
		color: #666666;
		margin-right: 16px;
    font-weight: 400;
    font-size: 14px;
    font-family: "PingFang SC",sans-serif;
	}
  .value-text {
    color: #333333;
    font-weight: 400;
    font-size: 14px;
    font-family: "PingFang SC",sans-serif;
  }
  .copy-text {
    margin-left: 10px;
    font-size: 12px;
    padding: 0 6px;
    background-color: #F6F6F6;
    border-radius: 8px
  }
</style>
